<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

    <title>在线论后台</title>

    <style type="text/css">
        /* 兼容浏览器 */
        *{
            padding: 0;
            margin: 0;
        }
        .content{
            width: 100%;
            height: 100%;
        }
        .content-left{
            width: 15%;
            height: 655px;
            background-color: #1c232f;
            float: left;
        }
        .content-right{
            width: 85%;
            height: 615px;
            background-size:100%;
            background:url(../img/communityBackground.jpg) repeat;
            float: right;
        }
        .left-title{
            height: 50px;
            width: 100%;
        }
        .left-title>a{
            text-align: center;
            display:block;
            width: 100%;
            height: 50px;
            line-height: 50px;/* 垂直居中 */
            color: white;
            text-decoration: none;/* 去掉下划线 */
        }
        .seg{
            height: 1px;
            width: 100%;
            background-color: black;
        }
        .nav{
            margin : 5px 0;
        }
        .nav-menu{
            width: 100%;
            height: 100%;
        }
        .nav-title{
            width: 100%;
            height: 40px;
            color: white;
            text-align: center;
            line-height: 35px;
            cursor: pointer;/*指针变手手 */
        }
        .nav-content{
            width: 100%;
            height: 100%;
            background-color: #0c1119;
        }
        .nav-content>a{
            display: block;
            height: 30px;
            width: 100%;
            color: #cccccc;
            text-decoration: none;
            text-align: center;
            line-height: 30px;
            font-size: 12px;
        }
        .nav-content>a:hover{/* 伪类,用于存放指针反馈 */
            display: block;
            height: 30px;
            width: 100%;
            color: #ffffff;
            text-decoration: none;
            text-align: center;
            line-height: 30px;
            background-color: #12040c;
        }
        .content-right>iframe{
            width: 60%;
            height: 615px;
            margin-left: 20%;
            opacity: 0.9;
            display: none;
        }
        #communityTitle{
            margin-left: 50%;
            text-align: center;
            padding-top: 0px;
        }
    </style>
</head>
<!-- 
    基本功能:
    展示帖子 发帖 删帖 个人信息 我的帖子
    待定功能:
    点赞 回复 退出登录 注销用户 
    样式倾向:
    左侧边栏实现功能选择界面
    右侧为显示界面
-->
<body>
    <div class="content">
        <div class="content-left">
            <!-- 左边菜单栏 -->
            <div class="left-title">
                <a href="community.html">在线论坛后台</a>
            </div>
            <div class="seg"></div><!-- 分割线 -->
            <!-- 菜单栏导航 -->
            <div class="nav">
                <!-- 每一个菜单栏 -->
                <div class="nav-menu" id="menu01">  
                    <div class="nav-content">   <!-- 子标题 -->
                        <a href="browseAdmin.html" target="browse" onclick="changeTopTitle01()">管理帖</a>
                        <a href="user.html" target="user" onclick="changeTopTitle02()">管理用户</a>
                        <a href="../Index.html">管理员登出</a>
                    </div>
                </div>
            </div>
            <div class="seg"></div>
        </div>
        <!-- 右边内容栏 -->
                    <!-- 顶栏 -->
                    <nav class="navbar navbar-expand-sm bg-light navbar-light fixed;">
                        <div id="communityTitle">社区后台</div>
                    </nav> 
        <div class="content-right">
            <iframe src="browse.html" frameborder="0" name="browse"></iframe>
            <iframe src="user.html" frameborder="0" name="user"></iframe> 
<!--        <iframe src="#" frameborder="0"></iframe>
            <iframe src="#" frameborder="0"></iframe>
            <iframe src="#" frameborder="0"></iframe>
            <iframe src="#" frameborder="0"></iframe> -->
        </div>
    </div>
</body>
<script>
    $(".nav-content>a").click(function(){
        //通过 .index()方法获取元素下标，从0开始，赋值给某个变量
        var _index = $(this).index();
        //让内容框的第 _index 个显示出来，其他的被隐藏
        $(".content-right>iframe").eq(_index).show().siblings().hide();
        //改变选中时候的选项框的样式，移除其他几个选项的样式
        $(this).addClass("change").siblings().removeClass("change");
    });
    function changeTopTitle01(){
        document.getElementById("communityTitle").innerHTML=("管理帖")
    }
    function changeTopTitle02(){
        document.getElementById("communityTitle").innerHTML=("管理用户")
    }
</script>

</html>
